<template>
  <div class="app-container">
    <!-- 表格上方按钮 -->
    <div>
      <!-- <div style="float: left; margin-bottom: 10px">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="preAdd"
          >新增</el-button
        >
      </div> -->
    </div>
    <!-- 信息列表 -->
    <div style="float: left; width: 100%">
      <el-table
        border
        v-loading="listLoading"
        :header-cell-style="{ background: '#FAFAFA' }"
        :data="institueList"
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="companyName" label="机构名称"> </el-table-column>
        <el-table-column prop="personInCharge" label="管理员账号">
        </el-table-column>
        <!-- <el-table-column prop="phone" label="联系方式"> </el-table-column> -->
        <el-table-column
          prop="analysis"
          label="简介"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.analysis == ''">-</span>
            <span v-else>{{ scope.row.analysis }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间"> </el-table-column>
        <el-table-column prop="gmtModified" label="更新时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="modify(scope.row)">
              编辑
            </el-button>
            <!-- 修改密码 -->
            <el-button
              type="text"
              size="medium"
              @click="modifyPwd(scope.row)"
            >
              修改密码
            </el-button>
            <!-- <el-button
              type="text"
              size="medium"
              @click="deleteCompany(scope.row)"
            >
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增对话框 -->
    <el-dialog
      title="新增机构"
      :visible.sync="addDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="80px">
        <el-form-item label="机构名称" prop="companyName">
          <el-input v-model="addForm.companyName"></el-input>
        </el-form-item>
        <el-form-item label="登录账号" prop="personInCharge">
          <el-input v-model="addForm.personInCharge"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="pwd">
          <el-input v-model="addForm.pwd"></el-input>
        </el-form-item>
        <el-form-item label="联系号码" prop="phone">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="analysis">
          <el-input v-model="addForm.analysis"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog
      title="修改机构"
      :visible.sync="modifyDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="modifyForm"
        :rules="rules"
        ref="modifyForm"
        label-width="80px"
      >
        <el-form-item label="机构名称" prop="companyName">
          <el-input v-model="modifyForm.companyName"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="analysis">
          <el-input v-model="modifyForm.analysis"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改密码对话框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="dialogPwdVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="userPwd">
        <el-form-item label="新密码：" label-width="120px">
          <el-input
            v-model="userPwd.newPwd"
            placeholder="请输入新密码"
            style="width: 70%"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatePwd">确 定</el-button>
        <el-button @click="dialogPwdVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import {
  queryCompanyList,
  addCompany,
  updateCompany,
  deleteCompany,
  updateCompanyPwd
} from "@/api/system/instituteList";
export default {
  //机构列表
  name: "Institute",
  data: function () {
    return {
      //表格加载遮罩
      listLoading: "false",
      //机构列表
      institueList: [],
      //修改密码对话框
      dialogPwdVisible: false,
      //修改密码表单
      userPwd: {
        companyId: "",
        newPwd: "",
      },
      //新增对话框
      addDialog: false,
      //新增的表单
      addForm: {},
      //修改的对话框
      modifyDialog: false,
      //修改的id
      modifyId: "",
      //修改的表单
      modifyForm: {},
      //表单验证
      rules: {
        companyName: [
          { required: true, message: "请输入机构名称", trigger: "blur" },
        ],
        personInCharge: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
        // phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码最少6位", trigger: "blur" },
        ],
        analysis: [{ required: false, message: "请输入简介", trigger: "blur" }],
      },
    };
  },
  created: function () {
    this.init();
  },
  watch: {
    //监听
    $route(to, from) {
      //路由变化方式，路由发生变化，方法就会执行
      this.init();
    },
  },
  methods: {
    init() {
      this.queryCompanyList();
    },
    //查找机构列表
    queryCompanyList() {
      this.listLoading = true;
      queryCompanyList().then((res) => {
        if (res.success == true) {
          this.institueList = res.data.resList;
          this.listLoading = false;
        }
      });
    },
    //修改密码预处理
    modifyPwd(row) {
      this.dialogPwdVisible = true;
      this.userPwd.companyId = row.id;
      this.userPwd.newPwd = "";
    },
    //修改密码请求
    updatePwd() {
      if (this.userPwd.newPwd == "") {
        this.$message({
          type: "warning",
          message: "请填写新密码",
        });
        return;
      }
      if (this.userPwd.newPwd.length < 6) {
        this.$message({
          type: "warning",
          message: "新密码不能少于6位",
        });
        return;
      }
      updateCompanyPwd(this.userPwd,this.token).then((res) => {
        if (res.success == true) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.dialogPwdVisible = false;
        }
      });
    },
    //新增预处理
    preAdd() {
      this.addForm = {};
      if (this.$refs["form"] !== undefined) {
        this.$refs["form"].resetFields();
      }
      this.addDialog = true;
    },
    //新增公司
    submitAdd() {
      if (
        this.addForm.companyName == undefined ||
        this.addForm.companyName == ""
      ) {
        this.$message({
          message: "请填写必要信息",
          type: "warning",
        });
      } else {
        addCompany(this.addForm).then((res) => {
          if (res.success == true) {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.queryCompanyList();
            this.addDialog = false;
          }
        });
      }
    },
    //删除公司
    deleteCompany(row) {
      this.$confirm("此操作将永久删除该公司, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteCompany(row.id).then((res) => {
            if (res.success == true) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.queryCompanyList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑预处理
    modify(row) {
      this.modifyForm = row;
      this.modifyDialog = true;
    },
    //提交修改
    submitUpdate() {
      if (
        this.modifyForm.companyName == undefined ||
        this.modifyForm.companyName == ""
      ) {
        this.$message({
          message: "请填写必要信息",
          type: "warning",
        });
      } else {
        updateCompany(this.modifyForm).then((res) => {
          if (res.success == true) {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.queryCompanyList();
            this.modifyDialog = false;
          }
        });
      }
    },
    //关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //跳转页面
    goto: function (current) {
      this.page.current = current;
      this.queryClassList();
    },
    //页码改变
    handleSizeChange: function (val) {
      this.page.size = val;
      this.queryClassList();
    },
  },
};
</script>
  
<style scoped>
</style>
  